<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import resize from '../mixins/resize'

const animationDuration = 6000
var fontColor = '#30eee9';
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        // title:{
        //   text:'分所销售水量占比',
        //   top:'5%',
        //   left:'center',
        //   textStyle:{
        //     color:'#FFF',
        //     align:'center',
        //   }
        // },

        title: {
          text: '绿化覆盖率',
          x: 'center',
          bottom:'5',
          textStyle: {
            // color: '#B4B4B4',
            fontSize: 16,
            fontWeight: 'normal',
          },
        },
        backgroundColor:'',
        grid: {
          left: '0%',
          right: '7%',
          top: 20,
          bottom: '15%',
          containLabel: true
        },
        tooltip : {
          show: true,
          trigger: 'item'
        },
        // legend: {
        //   show:true,
        //   x:'center',
        //   top:'5%',
        //   y:'35',
        //   icon: 'stack',
        //   itemWidth:10,
        //   itemHeight:10,
        //   textStyle:{
        //     color:'#1bb4f6'
        //   },
        //   data:['大户','市中','历下','天桥','槐荫','历城']
        // },
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            axisLabel:{
              color: '#0088ca'
            },
            axisLine:{
              show:true,
              lineStyle:{
                color: '#0088ca'
              }
            },
            axisTick:{
              show:false,
            },
            splitLine:{
              show:false,
              lineStyle:{
                color: '#0088ca'
              }
            },
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
          }
        ],
        yAxis : [
          {
            type : 'value',
            // name : '立方米',
            min:0,
            max:1000,
            axisLabel : {
              formatter: '{value}',
              textStyle:{
                color: '#0088ca'
              }
            },
            axisLine:{
              lineStyle:{
                color: '#0088ca'
              }
            },
            axisTick:{
              show:false,
            },
            splitLine:{
              show:true,
              lineStyle:{
                color:'#11366e'
              }
            }
          },
          // {
          //   type : 'value',
          //   name : '占比',
          //   min:0,
          //   max:1000,
          //   axisLabel : {
          //     formatter: '{value} %',
          //     textStyle:{
          //       color:'#186afe'
          //     }
          //   },
          //   axisLine:{
          //     lineStyle:{
          //       color:'#186afe'
          //     }
          //   },
          //   axisTick:{
          //     show:false,
          //   },
          //   splitLine:{
          //     show:true,
          //     lineStyle:{
          //       color:'#11366e'
          //     }
          //   }
          // }
        ],
        dataZoom: [
          {   // 这个dataZoom组件，默认控制x轴。
            show:true,
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
          },
          {   // 这个dataZoom组件，也控制x轴。
            show:true,
            type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
          }
        ],
        series : [
          {
            name:'大户',
            type:'line',
            stack: '总量',
            symbol:'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color:'#0092f6',
                lineStyle: {
                  color: "#0092f6",
                  width:1
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: 'rgba(7,44,90,0.3)'
                  }, {
                    offset: 1,
                    color: 'rgba(0,146,246,0.9)'
                  }]),
                }
              }
            },
            markPoint:{
              itemStyle:{
                normal:{
                  color:'red'
                }
              }
            },
            data:[120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 260, 280]
          },
          {
            name:'市中',
            type:'line',
            stack: '总量',
            symbol:'circle',
            symbolSize: 8,

            itemStyle: {
              normal: {
                color:'#00d4c7',
                lineStyle: {
                  color: "#00d4c7",
                  width:1
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: 'rgba(7,44,90,0.3)'
                  }, {
                    offset: 1,
                    color: 'rgba(0,212,199,0.9)'
                  }]),
                }
              }
            },
            data:[220, 182, 191, 210, 230, 270, 270,201, 154, 140, 240, 250]
          },
          {
            name:'历下',
            type:'line',
            stack: '总量',
            symbol:'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#aecb56',
                lineStyle: {
                  color: "#aecb56",
                  width:1
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: 'rgba(7,44,90,0.3)'
                  }, {
                    offset: 1,
                    color: 'rgba(114,144,89,0.9)'
                  }]),
                }
              }
            },
            data:[150, 232, 201, 154, 190, 180, 210,150, 182, 201, 154, 190]
          },
          {
            name:'天桥',
            type:'line',
            stack: '总量',
            symbol:'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#3A44FB',
                lineStyle: {
                  color: "#3A44FB",
                  width:1
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: 'rgba(7,46,101,0.3)'
                  }, {
                    offset: 1,
                    color: 'rgba(0,166,246,0.9)'
                  }]),
                }
              }
            },
            data:[150, 232, 201, 154, 190, 180, 210,150, 182, 201, 154, 190]
          },
          {
            name:'槐荫',
            type:'line',
            stack: '总量',
            symbol:'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#6FE81A',
                lineStyle: {
                  color: "#6FE81A",
                  width:1
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: 'rgba(7,44,90,0.3)'
                  }, {
                    offset: 1,
                    color: 'rgba(0,212,199,0.9)'
                  }]),
                }
              }
            },
            data:[150, 232, 201, 154, 190, 180, 210,150, 182, 201, 154, 190]
          },
          {
            name:'历城',
            type:'line',
            stack: '总量',
            symbol:'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#aecb56',
                lineStyle: {
                  color: "#aecb56",
                  width:1
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: 'rgba(7,44,90,0.3)'
                  }, {
                    offset: 1,
                    color: 'rgba(0,212,199,0.9)'
                  }]),
                }
              }
            },
            data:[200, 232, 201, 200, 190, 190, 210,190, 182, 201, 154, 190]
          }
        ]
      })
    }
  }
}
</script>
